<template>
    <div>
           <Breadcrumb>
      <BreadcrumbItem>用户平台</BreadcrumbItem>
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>素材网站推荐</BreadcrumbItem>
    </Breadcrumb>
    <Button type="primary" @click="modal1 = true">添加网站</Button>
    <Modal v-model="modal1" title="添加商品" @on-ok="ok">
      <Form :model="formItem" :label-width="80">
        <FormItem label="网站名">
          <Input v-model="formItem.input" placeholder="输入网站名..."></Input>
        </FormItem>
        <FormItem label="类型">
          <Select v-model="formItem.select">
            <Option value="java">Java</Option>
            <Option value="c">C++</Option>
            <Option value="python">Python</Option>
          </Select>
        </FormItem>
        <FormItem label="网站链接">
          <Input v-model="formItem.input" placeholder="输入网站链接..."></Input>
        </FormItem>
      </Form>
    </Modal>
    <div>
      <Table border ref="selection" :columns="columns4" :data="data4"></Table>
      <Button @click="handleSelectAll(true)">全选</Button>
      <Button @click="handleSelectAll(false)">取消全选</Button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      modal1: false,
      formItem: {
        input: '',
        select: '',
        radio: 'male',
        checkbox: [],
        switch: true,
        slider: [20, 50],
        textarea: ''
      },
      columns4: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '网站名',
          key: 'name'
        },
        {
          title: '类型',
          key: 'select'
        },
        {
          title: '网站链接',
          key: 'link'
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                },
                '跳转'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      data4: [
        {
          name: 'iview-ui',
          select: 'vue',
          link: 'https://iviewui.com/components/table'
        }
      ]
    }
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    show (index) {
      this.$Modal.info({
        title: '展开信息',
        content: `Name：${this.data1[index].name}<br>price：${this.data1[index].price}<br>date：${this.data1[index].date}`
      })
    },
    remove (index) {
      this.data1.splice(index, 1)
    },
    ok () {
      this.$Message.info('添加成功')
    }
  }
}
</script>
